<template>
	<MdpTree
		ref="nodeTree"
		title="部门"
		showCheckbox
		:props="propsCpd"
		:load="listDept"
		:del="delDept"
		:multiple="multiple"
		:showConfirm="showConfirm"
		:hidden="hiddenCpd"
		@addTopNode="(cb) => onAddTopClick(cb)"
		@editNode="(d, cb, subcb) => onEditClick(d, cb, subcb)"
		@addSubNode="(p, cb) => onAddSubClick(p, cb)" 
		@changePid="(cks,cb) => onChangePidClick(cks,cb)"
		@confirm = "(d)=>{$emit('confirm',d);$emit('select',d)}"
		@check-change="(d,c,i)=>$emit('check-change',d,c,i)"
		@node-click="(d,n,c)=>$emit('node-click',d,n,c)"
		rootId="A0"
		:draggable="true"
	> 
		<template #nodeName="{ data }">
			<el-space>  
				 <div><Icon v-if="data.icon" :icon="data.icon"/>{{data.deptName}}</div>
			</el-space>
		</template> 
	</MdpTree>

	<!--编辑 Dept xm_project_func界面-->
	<mdp-dialog ref="editDialog" width="30%" append-to-body :close-on-click-modal="false">
		<template #default="{ data,dialog }">
			<el-form ref="editForm" :model="editForm" label-width="150" 	>
			<el-form-item label="部门编号"  prop="deptid" :rules="[
				{ required: true, message: '不能为空'}
				]">
				{{editForm.deptid}}
			</el-form-item>
			<el-form-item label="部门名称"  prop="deptName"
			:rules="[
				{ required: true, message: '名称不能为空'}
				]">
				<el-input v-model="editForm.deptName" />
			</el-form-item>


			<el-form-item label="图标" >
				  <IconSelect v-model="editForm.icon"/>
			</el-form-item> 
		</el-form>
		
		<div class="footer">
			<el-button @click="dialog.close()">关 闭</el-button>
			<el-button type="primary" v-loading="loading.edit" @click="editSubmit(data.callback)">确 定</el-button>
		</div>
		</template>
	</mdp-dialog>

	<!--新增 Dept xm_project_func界面-->
	<mdp-dialog ref="addDialog" width="30%" append-to-body :close-on-click-modal="false">
		<template #default="{ data, dialog }">
			<el-form ref="addForm" :model="addForm" label-width="150" 	>
			
			<el-form-item label="上级部门">
				
				<el-tag>{{  data.parent && data.parent.deptid && data.parent.deptid!='A0'? "上级："+data.parent.deptName:"顶级部门A0" }}</el-tag>

			</el-form-item>
			<el-form-item label="部门编号" prop="deptid" :rules="[
				{ required: true, message: '不能为空'}
				]">
				<el-input v-model="addForm.deptid" placeholder="如果为空，则系统自动生成"/>
			</el-form-item>
			<el-form-item label="部门名称"  prop="deptName"
			:rules="[
				{ required: true, message: '名称不能为空'}
				]">
				<el-input v-model="addForm.deptName" />
			</el-form-item>

			<el-form-item label="图标" >
				  <IconSelect v-model="addForm.icon"/>
			</el-form-item>  
		</el-form>
		
		<div class="footer">
			<el-button @click="dialog.close()">关闭</el-button>
			<el-button type="primary" v-loading="loading.add"  @click="addSubmit(data.parent,data.callback)">确 定</el-button>
		</div>
		</template>
	</mdp-dialog>  
</template>

<script>
import util from '@/components/mdp-ui/js/util' //全局公共库 
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
 
export default {
	props: {
	'subOpType':{type:String,defalut:'mng'},
	'multiple':{type:Boolean,default:false},
	'showConfirm':{type:Boolean,default:false},
	'hidden':{type:Object,default:()=>null},
	'params':{type:Object,default:()=>null},
	'clearable':{type:Boolean,default:true},
			relyType:{
				type:String,
				default:''
			},
			relyId:{
				type:String,
				default:''
			},
			relyStype:{
				type:String,
				default:'',
			},
			relySid:{
				type:String,
				default:''
			}
		},
	computed: {
		...mapState(useUserStore, ['userInfo', 'roles']),
		
				hiddenCpd(){
			var isSelect=this.subOpType=='select'
						var hidden ={ 
								batchDel: isSelect,
								del:isSelect,
								changePid: false,
								addTop: isSelect,
								addSub: isSelect,
								edit: isSelect,
								filter: false,
								page: true,
								}
								hidden=Object.assign(hidden,this.hidden)
								return hidden
				},
				propsCpd(){
					return { id: 'deptid', pid: 'pdeptid', label: 'deptName' , isLeaf:(data,n)=>{
						return data.childNum<=0
					}}
				}
	}, 
	data() {
		return {
			filters: {

			}, 
			addForm:{deptid:'',pdeptid:'',deptName:'',isLeaf:'0',isAuth:'0',limitType:'2',deptType:'',pqx:'',qxLvl:''},
			editForm:{deptid:'',pdeptid:'',deptName:'',isLeaf:'0',isAuth:'0',limitType:'2',deptType:'',pqx:'',qxLvl:''},
			loading:{add:false,edit:false,list:false}	
		}
	}, //end data
	methods: {
		listDept(params, node) { 
			Object.assign(params,this.filters)
			if(this.params){
				Object.assign(params,this.params)
			} 
			return this.$mdp.listDept(params)
		},
		delDept(p){return this.$mdp.delDept(p)},
		
		addDept(p){return this.$mdp.addDept(p)},
		
		editDept(p){return this.$mdp.editDept(p)},
		batchChangeParent(p){return this.$mdp.batchChangeDeptParent(p)},
		//显示编辑界面 Dept xm_project_func
		onEditClick: function (formData, callback, addSubCallback) {
			this.editForm={...formData}
			this.$refs['editDialog'].open({
				formData: formData,
				callback: callback,
				addSubCallback: addSubCallback
			})
		},
		//显示新增界面 Dept xm_project_func
		onAddTopClick: function (callback) { 
			var formData = {}
			if (!this.initExtParams(formData)) {
				return
			}
			
			this.$refs['addDialog'].open({
				formData: formData,
				parent: null,
				callback: callback
			})
		},
		initExtParams(formData, parent) {
			return true
		},
		onAddSubClick: function (parent, callback) { 
			var formData = {}
			if (!this.initExtParams(formData, parent)) {
				return
			}  
			Object.assign(formData,parent)
			formData.pdeptid=parent.deptid 
			formData.deptid=null
			this.addForm={...formData}
			this.$refs['addDialog'].open({
				formData: formData,
				parent: parent,
				callback: callback
			})
		}, 
		onChangePidClick: function(idLinks,callback){  
			this.batchChangeParent(idLinks).then(res=>{
				let {tips}=res
				if(tips.isOk){
						if(callback){
							callback(true)
						}
						this.$message.success(tips.msg)
					}else{ 
						this.$message.error(tips.msg)
					}
				}) 
		}, 
		addSubmit(parent,callback){
			var branchId=this.userInfo.branchId
				 
				this.addForm.branchId=branchId 
				if(this.relyType){
					this.addForm.relyType=this.relyType
				}
				
				if(this.relyId){
					this.addForm.relyId=this.relyId
				}
				
				if(this.relyStype){
					this.addForm.relyStype=this.relyStype
				}
				
				if(this.relySid){
					this.addForm.relySid=this.relySid
				}
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.loading.add = true;
							this.addDept(this.addForm).then(res=>{
								this.loading.add=false;
								if(res.tips.isOk){ 
									this.$message.success(res.tips.msg);   
									this.$refs.addDialog.close()
									callback(res.data)
								}else{
									this.$message.error(res.tips.msg);
								}
							}).catch(e=>this.loading.add = false  );

						});
					}
				});
		},
		editSubmit(callback){
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.loading.edit = true;
							this.editDept(this.editForm).then(res=>{ 
								if(res.tips.isOk){ 
									this.loading.edit = false
									this.$refs.editDialog.close();
									this.$message.success(res.tips.msg);  
									callback(this.editForm)
								}else{
									this.$message.error(res.tips.msg);
								}
							}).catch(e=>this.loading.edit = false  );

						});
					}
				});
		}
		 
	}, //end methods
	components: { 
	},
	mounted() { 
	}
}
</script>

<style lang="scss" />
